<template>
  <div id="views" class="recharge_confirm">
    <div class="content">
      <div class="c1">
        <p class="t1">1.请向指定银行账户付款</p>
        <table cellspacing="0" border="1" class="width100">
          <tbody>
          <tr>
            <td>收款方户名</td>
            <td>{{name}}<span class="copy" :data-clipboard-text="name" id="copy1" @click="copyInfo('#copy1')">复制</span>
            </td>
          </tr>
          <tr>
            <td>收款方账号</td>
            <td>{{receiveAccount}}<span class="copy" :data-clipboard-text="receiveAccount" id="copy2" @click="copyInfo('#copy2')">复制</span></td>
          </tr>
          <tr>
            <td>收款方开户行</td>
            <td>{{bank_name}}<span class="copy" :data-clipboard-text="bank_name" id="copy3" @click="copyInfo('#copy3')">复制</span></td>
          </tr>
          <tr>
            <td>转账金额</td>
            <td class="money" style="color: #F2A336">￥{{money}}</td>
          </tr>
          <tr>
            <td>状态</td>
            <td class="r_status" style="color: #b61400;">待确认转账</td>
          </tr>
          </tbody>
        </table>
        <p class="t1 t2">2.请用第三方网银或者银行柜台转款</p>
        <p class="t1 t2">3.转账后请填写转款人姓名,提交确认请求</p>
        <p class="t1 t2">4.超过工作时间超过1小时未确认，请联系客服核查</p>
        <p class="t1 t2">5.若遇周末充值，则顺延至工作日处理</p>
      </div>
      <div class="cardName">
        <span>转款卡主姓名</span>
        <input type="text" v-model="cardName" placeholder="请输入卡主姓名" @input="nameChange">
      </div>
    </div>
    <div class="reminder">
      温馨提示:如有任何疑问请联系专属客服(请在工作日<span style="color: #ED5656">9:00~21:00</span> 之间完成充值)
    </div>
    <button id="confirm" class="yellowbtn" @click="submit">我已确认转账</button>
    <button id="revoke" class="yellowbtn" @click="$refs.revokeRef.dialogShow()">撤销充值订单</button>
    <confirm-recharge  ref="refb" @confirm="confirmRecharge()"/>
    <confirm-revoke ref="revokeRef" @confirm="confirmRevoke()"/>
  </div>
</template>

<script>
  import {getPublicMes , rechargePublic , revokeRechargePublic} from '../../http/api';
  export default {
    name: "recharge_confirm",
    introduce: '对公转账-确认转账',
    data() {
      return {
        money: '',
        receiveAccount: '',/*收款账号*/
        cardName: '',//转款卡主姓名
        order_id : '',//订单id
        name : '',//收款方
        bank_name : '',//开户行
        dialogConfirm:'<p class="textCenter" style="font-size: 0.28rem;">请确认您已向指定银行账户转账</p>'+
          '<p class="textCenter" style="color:#F15342;font-size:0.22rem;padding-top:0.21rem">恶意点击会导致账号部分功能被禁用，请谨慎操作</p>',
        is_new : false,
        channel : null,//支付方式
      }
    },
    components:{
      DiaLogtwo: resolve => {require(['../../components/dialogTwo'], resolve)},
      ConfirmRecharge: resolve => {require(['../../components/ConfirmRecharge'], resolve)},
      ConfirmRevoke: resolve => {require(['../../components/ConfirmRevoke'], resolve)},
      tongdunCountdown : resolve => { require(['../../components/tongdunCountdown'],resolve) },//同盾倒计时功能插件
    },
    mounted() {
      let thiz =this;
      let query = this.$route.query;
      let money = Number(query.money) || false;
      // let is_continue = Number(query.is_continue) || false;//是否是继续上次的未确认充值
      let is_new = Number(query.is_new) || false;//是否是发起新充值（有旧的充值正在审核）
      this.money = money;
      this.is_new = is_new;
      this.channel = query.channel || null;
      let param = {
        amount : thiz.money , noToast : true,channel : thiz.channel,
      };
      if(is_new){
        param.is_new = is_new;
      }
      getPublicMes(param ).then( res => {
        let data = res.data.data;
        let card_info = data.card_info;
        thiz.name = card_info.name;
        thiz.receiveAccount = card_info.card_num;
        thiz.bank_name = card_info.bank_name;
        thiz.order_id = data.order_id;
      });
    },
    methods: {
      confirmRevoke(){
        revokeRechargePublic({order_id : this.order_id , channel : this.channel}).then(res => {
          if(res.code == 200){
            require('../../common/js/toast').toast('撤销成功');
            this.$router.go(-1);
          }
        });
      },
      nameChange() {
        this.cardName = this.delCharacter(this.cardName);
      },
      copyInfo(id) {
        let copy = require('../../common/js/copy').copy;
        copy({id: id, toast: '复制成功'});
      },
      ajaxPost(order_id){
        let params = {
          order_id : order_id || this.order_id,
          card_owner_name : this.cardName,
          uid : this.$store.state.uid,
          amount : this.money,
          channel : this.channel
        };
        // if(this.is_new){
        //   params.is_new = this.is_new;
        // }
        rechargePublic(params).then( res => {
          if( res.code == 200 ){
            require('../../common/js/toast').toast('转账成功');
            this.$router.replace({path:'/recharge'});
          }
        });
      },
      confirmRecharge(){
        let thiz = this;
        this.ajaxPost();
        // if(this.is_new){
        //   getPublicMes({ amount : thiz.money , noToast : true } ).then( res => {
        //     if(res.code == 200){
        //       let data = res.data.data;
        //       thiz.ajaxPost(data.order_id);
        //     }
        //   });
        // } else {
        //   this.ajaxPost();
        // }
      },
      submit() {
        let thiz = this;
        if (!this.cardName) {
          require('../../common/js/toast').toast('请输入转款卡主姓名！');
          return;
        }
        thiz.$refs.refb.changeCardName(thiz.cardName);
        thiz.$refs.refb.dialogShow();
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  #views {
    padding: 0rem;
    text-align: left;

    .c1 {
      padding: 0 0.3rem;
      background: #fff;
    }

    .copy {
      position: absolute;
      z-index: 1;
      right: 0.15rem;
      top: 0.15rem;
      display: inline-block;
      font-size: 0.24rem;
      border-radius: 0.04rem;
      background: #F8D448;
      padding: 0.11rem;
    }

    .t1 {
      padding: 0.42rem 0;
      color: #595959;
      font-size: 0.26rem;
    }

    .t2 {
      padding: 0.28rem 0;
      padding-bottom: 0;
    }

    .t2:last-child {
      padding-bottom: 0.28rem;
    }

    table {
      font-size: 0.26rem;
      border-collapse: collapse;

      td {
        padding: 0.2rem 0rem;
        border: 0.02rem solid #F8D448;
        line-height: 150%;
      }

      tr > td:first-child {
        text-align: left;
        padding-right: 0.2rem;
        padding-left: 0.2rem;
        background: #fdf6e9;
        white-space: nowrap;
      }

      tr > td:last-child {
        color: #313131;
        text-align: left;
        padding-left: 0.2rem;
        padding-right: 0.98rem;
        position: relative;
      }

      .r_status {
        color: #ED5656
      }
    }

    .cardName {
      padding: 0 0.3rem;
      border-top: 0.03rem solid #EEEEEE;
      color: #262626;
      font-size: 0.32rem;
      background: #fff;
      overflow: hidden;
      line-height: 1rem;
      box-sizing: content-box;

      input {
        float: right;
        height: 1rem;
        width: 3rem;
      }
    }

    .reminder {
      font-size: 0.24rem;
      color: #595959;
      line-height: 170%;
      padding: 0.1rem 0.3rem;
      background: #FFFBED;
      border-top: 0.01rem solid #FFE893;
      border-bottom: 0.01rem solid #FFE893
    }

    #confirm {
      border-radius: 1rem;
      width: calc(100% - 0.6rem);
      margin-left: 0.3rem;
      margin-bottom: 0rem;
      font-size: 0.28rem;
    }
    #revoke{
      border-radius: 1rem;
      width: calc(100% - 0.6rem);
      margin-left: 0.3rem;
      margin-bottom: 0.8rem;
      background: #fff;border: 0.01rem solid#E5E5E5;margin-top: 0.28rem;font-size: 0.28rem;
    }
  }
</style>
